<template>
    <div class="body">
         <Header class="head">
            <!-- <li slot="top"> <span class="iconfont icon-icon-arrow-left4" @click="jump_totals()"></span></li>
            <li slot="top"><span class="iconfont icon-gengduo"></span></li> -->
      </Header>
        <section>
            <h1>登录</h1>
            <p>登录轻芒，订阅更多你感兴趣的公众号、Feed 和主题。</p><br>
            
            <label for=""><p>用户名：</p><input class="input" type="text" v-model="username"></label><br>
            <label for=""><p>密 码：</p><input class="input" type="password" v-model="password"></label>
            <h4>
                登录意味着你已阅读并同意<span>用户使用协议 </span>和<span>隐私条款</span>
            </h4>
            <button @click="log()">登 录</button>
        </section> 
        <footer>
            <p>没有账号？ <router-link to="/register"> 点我去注册 </router-link> </p>
        </footer>
    </div>
</template>

<script>
export default {
    data(){
        return{
            username:"",
            password:""
        }
    },
    mounted(){
        if(sessionStorage.getItem("username") && sessionStorage.getItem("password")){
            console.log(2)
            this.$router.push("/index")
        }   
    },
    methods:{
        log(){
            if(localStorage.getItem("username") || localStorage.getItem("password")){
                if(localStorage.getItem("username") === this.username && localStorage.getItem("password") === this.password){
                sessionStorage.setItem("username",this.username)
                sessionStorage.setItem("password",this.password)

                this.$router.push("/index")
            }
            else{
                alert("账号或密码错误")
            }


            }else{
                alert("用户名错误或未注册")
            }
            
        }
    },
    watch:{
        password(newval){
            console.log(newval)
        }

    }

}
</script>

<style scoped lang="scss">
.body{
    background: url("../../public/images/bg.jpg") no-repeat 0.4rem -3.9rem;
    background-size: 100%;
}
header{
    height: .15rem;
    margin: .4rem  0 0 0;
    p{
        margin-left: .2rem;
        height: .35rem;
        line-clamp: .35rem;
        font-size: .16rem;
    }
}

section{
    text-align: center;
    box-sizing: border-box;
    padding: 0 .2rem;
    

    h1{
        text-align: center;
        font-size: .3rem;
        font-weight: none;
        margin: .1rem 0 .2rem 0;
        overflow: hidden;
    }
    p{
        text-align: center;
        display:inline-block;
        width: 1.9rem;
    }
    h4{
        font-size:0.12rem;
        font-weight: normal;
        margin: .1rem 0;
        color: #5a5a5a;
    }
    h4 span{
        color: #121212;
        text-decoration: underline;
    }
     label{
        display: flex;
        justify-content: space-between;
        font-size: .14rem;
        margin: -0.03rem 0;
    }
    label p{
        flex: 1;
        
        line-height: .35rem;
    }
    .input{
        flex: 3;
        height: .3rem;
        width: 2rem;
        border: 1px solid #666666;
        margin-right: .07rem;

    }
    button{
        width: 100%;
        height: .46rem;
        border-radius: .25rem; 
        background:black;
        color: #ffffff;
        font-size:.14rem;

    }
    label:nth-of-type(1){
        
        margin-top: .5rem;
    }
}
footer{
    p{
        text-align: center;
    }
    a{
        margin-top: 1.0rem;
        display: inline-block;
        color: #666666;
        text-decoration: underline;
    }
}
</style>